liwe.form.instance.prototype.jconed = function ( vars )
{
	this._start_field ( vars );

	var id = this.name + '@' + vars [ 'name' ];
	var jconed_id = 'jconed-' + id; //vars [ 'name' ];

	vars [ 'form_inst' ] = this;
	//if ( ! vars [ 'value' ] ) vars [ 'value' ] = '<p></p>';
	if ( ! vars [ 'width' ] ) vars [ 'width' ] = '100';
	if ( ! vars [ 'height' ] ) vars [ 'height' ] = '100';
	vars [ 'overlay' ] = true;

	vars [ 'id' ] = id;
	vars [ 'jconed_id' ] = jconed_id;
	vars [ 'escaped_value' ] = escape ( vars [ 'value' ] );

	this.html += String.formatDict (
		'<input type="hidden" name="%(name)s" id="%(id)s" value="%(escaped_value)s" />' +
		'<div id="%(jconed_id)s" class="jconed" style="min-width: %(width)spx; min-height: %(height)spx">%(value)s</div>'	
	, vars );

	this._widgets [ vars [ 'name' ] ] = new WWL.jconed ( jconed_id, id, vars );

	this._newline ( vars );
};


liwe.form5.templates [ 'jconed' ] = '<div id="%(jconed_id)s" class="jconed" style="min-width: %(width)spx; min-height: %(height)spx">%(value)s</div>';

liwe.form5.plugin_add ( 'jconed', function ( frm, type, name, attrs )
{
	frm.addEventListener ( 'render', function ()
	{
		attrs [ 'jconed' ].render ();
	} );

	attrs [ 'template' ] = 'jconed';
	attrs [ 'render' ] = function ( form, item )
	{
		item [ 'overlay' ] = true;
		if ( ! item [ 'width' ] ) item [ 'width' ] = '100';
		if ( ! item [ 'height' ] ) item [ 'height' ] = '100';
		var jconed_id = 'jconed-' + item [ 'name' ];

		var dct = {
			'jconed_id' : jconed_id,
			'width' : item [ 'width' ],
			'height' : item [ 'height' ],
			'value': item [ 'value' ]
		};

		item [ 'jconed' ] = new WWL.jconed ( jconed_id, null, item );

		return String.formatDict ( liwe.form5.templates [ 'jconed' ], dct );
	};
	attrs [ 'get_value' ] = function ()
	{
		if ( attrs [ 'jconed' ] )
			return attrs [ 'jconed' ].get_value ();
		return attrs [ 'value' ];
	};
	attrs [ 'set_value' ] = function ( v )
	{
		attrs [ 'value' ] = v;
		if ( attrs [ 'jconed' ] )
			attrs [ 'jconed' ].set_value ( v );
	};
} );
